<template>
  <div id="my">
    <div class="user_info_wrap">
      <div v-if="userInfo.avatarUrl" class="user_img_wrap">
        <img class="user_bg" :src="userInfo.avatarUrl" />
        <div class="user_info">
          <img class="user_icon" :src="userInfo.avatarUrl" />
          <div class="user_name">{{ userInfo.nickName }}</div>
        </div>
      </div>
      <div v-else class="user_btn">
        <a @click="login">登录</a>
      </div>
    </div>
    <div class="user_content">
      <div class="user_main">
        <!-- 历史足迹 -->
        <div class="history_wrap">
          <a>
            <div class="his_num">0</div>
            <div class="his_name">收藏的店铺</div>
          </a>
          <a url="/pages/collect/index">
            <div class="his_num">{{ collectNums }}</div>
            <div class="his_name">收藏的商品</div>
          </a>
          <a>
            <div class="his_num">0</div>
            <div class="his_name">关注的商品</div>
          </a>
          <a>
            <div class="his_num">0</div>
            <div class="his_name">我的足迹</div>
          </a>
        </div>
        <!-- 我的订单 -->
        <div class="orders_wrap">
          <div class="orders_title">我的订单</div>
          <div class="order_content">
            <a>
                 <div class="iconfont icon-dingdan"></div>
             <p class="order_name">全部订单</p>
            </a> 
            <a>
              <div class="iconfont icon-fukuantongzhi"></div>
              <div class="order_name">待付款</div>
            </a>
            <a>
              <div class="iconfont icon-daishouhuo"></div>
              <div class="order_name">待收货</div>
            </a>
            <a>
              <div class="iconfont icon-tuikuantuihuo"></div>
              <div class="order_name">退款/退货</div>
            </a>
          </div>
        </div>
        <!-- 收货地址管理 -->
        <div class="address_wrap">收货地址管理</div>
        <!-- 应用信息相关 -->
        <div class="app_info_wrap">
          <div class="app_info_item app_info_contact">
            <span>联系客服</span>
            <span>400-618-4000</span>
          </div>
          <div class="app_info_item">意见反馈</div>
          <div class="app_info_item">关于我们</div>
        </div>
        <!-- 推荐 -->
        <div class="recommend_wrap">把应用推荐给其他人</div>
      </div>
    </div>
  </div>
</template>

<script>
import mockRequests from "@/api/mockAjax";
export default {
  name: "ProfileIndex",

  data() {
    return {
      collectNums: 0,
      userInfo: {},
    };
  },

  mounted() {},

  methods: {
    login() {
      let collect = JSON.parse(sessionStorage.getItem("collect")) || [];
      this.collectNums = collect.length;
      mockRequests.get("/user/login").then((res) => {
        console.log(res);
        this.userInfo = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
#my {
  height: 100vh;
  background-color: #edece8;
}
.user_info_wrap {
  height: 45vh;
  overflow: hidden;
  background-color: var(--color-tint);
  position: relative;
  .user_img_wrap {
    position: relative;
    .user_bg {
      height: 45vh;
      // 高斯模糊
      filter: blur(10px);  
    }
    .user_info {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 10%;
      text-align: center;
      .user_icon {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
      .user_name {
        color: #fff;
        margin-top: 40px;
        // font-size: 40px;
      }
    }
  }
  .user_btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 40%;
    border: 1px solid greenyellow;

    font-size: 38px;
    padding: 20px;
    border-radius: 10px;
    a {
      color: greenyellow;
    }
  }
}

.user_content {
  position: relative;
  .user_main {
    padding-bottom: 100px;
    color: #666;
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    top: -40px;

    .history_wrap {
      background-color: #fff;
      display: flex;
      a {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        .his_num {
          color: var(--color-tint);
        }
   
      }
    }
    .orders_wrap {
      background-color: #fff;
      margin-top: 20px;
      .orders_title {
        padding: 10px;
        border-bottom: 1px solid #ccc;
      }
      .order_content {
        display: flex;  
         .iconfont {
            color: var(--color-tint);
            font-size: 25px;
          }
        a {
          padding: 8px 0;
          flex: 1;
          text-align: center;
       
        }
      }
    }
    .address_wrap {
      margin-top: 20px;
      background-color: #fff;
      padding: 10px;
    }
    .app_info_wrap {
      margin-top: 20px;
      background-color: #fff;
      .app_info_item {        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ccc;
      }

    }
    .recommend_wrap {
      margin-top: 20px;
      background-color: #fff;
      padding: 10px;
    }
  }
}
</style>
